<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red{
            color:red;
        }
        .bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- {{}}  里面可以写表达式，不可以写语句 -->
    <div id="test">
        {{msg}} 
        {{num>90?'及格':'不及格'}}
        <!-- <span v-html="msg"></span>
        <span v-text="msg"></span> -->

        <div>
            <span v-if="num>90">优秀</span>
            <span v-else-if="num>60&&num<90">中等</span>
            <span v-else>差</span>
        </div>

        <template v-show="status === 'user'">
            <input type="text" placeholder="请输入用户名">
            <input type="text" placeholder="请输入密码">
        </template>

        <template v-show="status === 'phone'">
            <input type="text" placeholder="请输入手机号">
        </template>

        <button v-on:click="change">切换登录方式</button>
        <!-- 循环数组 -->
        <ul>
            <li v-for="(item,index) in list" :style='liStyle'>
                <input type="checkbox" v-model="item.status">
                <span :class="['bold',{'red':index<3}]">{{index<10?'0'+(index+1):index+1}}</span>、{{item.songName}} ---- {{item.name}}
            </li>
        </ul>
        <!-- 循环对象 -->
        <ul>
            <li v-for="(item,key,index) in song">{{index}}-----{{item}}----{{key}}</li>
        </ul>
        <!-- 循环字符串 -->   
        <ul>
            <li v-for="(item,index) in status">{{index}}----{{item}}</li>
        </ul>

        <!-- 循环数字 -->
        <ul>
            <li v-for="(item,index) in 10">{{index}}----{{item}}</li>
        </ul>

        <img :src="url" alt="">
        <a v-bind:href="hUrl">百度</a>
        <br>
        <!-- <input type="text" @input="ipt($event)" v-bind:value="iptValue"> -->
        <input type="text" v-model="iptValue">
        
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#test',  //element缩写 挂载元素 ,根元素
            data:{       //数据层
                iptValue:'zs',
                msg:'<i>别睡了</i>',
                arr:['篮球','足球'],
                hobby:[],
                check:false,
                fz:24,
                liStyle:{
                    fontSize:'30px',
                    color:'green'
                },
                num:95,
                status:'user',
                hUrl:'https://baidu.com',
                song:{
                    songName:'精忠报国',
                    name:'牛博'
                },
                url:'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super',
                list:[
                    {
                        songName:'精忠报国',
                        name:'牛博'
                    },
                    {
                        songName:'姑娘',
                        name:'王源'
                    },
                    {
                        songName:'痒',
                        name:'张嘉豪'
                    },
                    {
                        songName:'痒',
                        name:'张嘉豪'
                    }
                ]
            },
            methods:{
                change(){
                    this.status = this.status === 'user' ? 'phone' : 'user'
                },
                ipt(e){
                   this.iptValue = e.target.value;
                    console.log("====", e.target.value)
                }
            } 
        })
    </script>
</body>
</html>